<template>
  <div class="storeincomechart-item-container">
    <div ref="storeincomeChartWrapper" class="chart-item"></div>
  </div>
</template>

<script lang="ts">
  import useEcharts from '@/hooks/useEcharts'
  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
  import { dispose, graphic } from 'echarts/core'

  export default defineComponent({
    name: 'Storeicomechart',
    props: {
      expectRevenuelistamount: {
        type: Array,
      },
    },
    setup(props) {
      const loading = ref(true)
      const storeincomeChartWrapper = ref<HTMLDivElement | null>(null)
      const xaxisdata = ref([])
      const yaxisdata = ref([])
      const init = () => {
        const option = {
          grid: {
            top: '10%',
            left: '1%',
            right: '1%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xaxisdata.value,
            boundaryGap: false,
            axisLabel: {
              color: '#1E1E1E',
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#E5E8EF',
              },
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              show: true,
              lineStyle: {
                color: '#23ADFF',
                width: 2,
              },
            },
          },
          yAxis: {
            type: 'value',
            name: '单位(元)',
            nameTextStyle: {
              //  单位样式
              color: '#4E5969', //  字体颜色
              fontSize: 8, //  字体大小
            },
            offset: 13,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E5E8EF',
              },
            },
            axisLabel: {
              formatter(value: any, idx: number) {
                if (idx === 0) return value
                return `${value}`
              },
              color: '#1E1E1E',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#E5E8EF',
              },
            },
          },
          tooltip: {
            trigger: 'axis',
            formatter(params) {
              const amount = params[0]
              return `<div class="tooltip-title"><span>${amount.axisValue}</span></div><div class="content-panel">
                <span>预计收益：</span><span class="tooltip-value">${amount.data}元</span></div>`
            },
            className: 'echarts-tooltip-diy',
          },
          series: [
            {
              data: yaxisdata.value,
              type: 'line',
              smooth: true,
              symbolSize: 12,
              emphasis: {
                focus: 'series',
                itemStyle: {
                  borderWidth: 2,
                },
              },
              lineStyle: {
                width: 3,
                color: new graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(30, 231, 255, 1)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(36, 154, 255, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(111, 66, 251, 1)',
                  },
                ]),
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(17, 126, 255, 0.16)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(17, 128, 255, 0)',
                  },
                ]),
              },
            },
          ],
        }
        loading.value = false
        nextTick(() => {
          useEcharts(storeincomeChartWrapper.value as HTMLDivElement)?.setOption(option)
        })
      }
      const updateChart = () => {
        useEcharts(storeincomeChartWrapper.value as HTMLDivElement).resize()
      }
      watch(
        () => props.expectRevenuelistamount,
        () => {
          props.expectRevenuelistamount.forEach((item) => {
            yaxisdata.value.push(item.data)
            xaxisdata.value.push(item.date)
          })
          init()
        },
        { immediate: true, deep: true }
      )
      onMounted(init)
      onBeforeUnmount(() => {
        dispose(storeincomeChartWrapper.value as HTMLDivElement)
      })
      return {
        loading,
        storeincomeChartWrapper,
        updateChart,
      }
    },
  })
</script>
<style lang="less" scoped>
  .storeincomechart-item-container {
    width: 100%;
    height: 240px;
    .chart-item {
      height: 100%;
    }
  }
</style>
